<template>
  <div class="table">
    <div class="content-common">
      <el-form :label-position="'right'" :inline="true" :model="query">
        <el-form-item label="测站">
          <el-input v-model="query.stnm" placeholder="测站名称"></el-input>
        </el-form-item>

        <el-form-item label="">
          <el-button
            type="primary"
            icon="search"
            @click="
              page.currentPage = 1;
              getData();
            "
            >查询</el-button
          >
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="plus" @click="handleAdd()">新增</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="download" @click="download">下载模板</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-upload :headers="headers" :show-file-list="false" :on-success="successup" :action="daoruUrl" :limit="1">
            <el-button type="primary">批量导入</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border class="table-common" header-cell-class-name="table-header">
        <el-table-column align="center" prop="stnm" label="测站名称"></el-table-column>
        <el-table-column align="center" prop="province" label="省份"></el-table-column>

        <el-table-column align="center" prop="county" label="县(区)"></el-table-column>
        <el-table-column align="center" prop="township" label="乡镇"></el-table-column>
        <el-table-column align="center" prop="village" label="村"></el-table-column>
        <el-table-column align="center" prop="avgTemp" label="年平均温度(℃)"></el-table-column>
        <el-table-column align="center" prop="maxTemp" label="年最高温度(℃)"></el-table-column>

        <el-table-column align="center" prop="minTemp" label="年最低温度(℃)"></el-table-column>
        <el-table-column align="center" prop="accumulateTemp" label="≥10℃积温"></el-table-column>
        <el-table-column align="center" prop="frostlessPeriod" label="无霜期(d)"></el-table-column>
        <el-table-column align="center" prop="yearDrp" label="年均降雨量(mm)"></el-table-column>
        <el-table-column align="center" prop="yearEt" label="年蒸发量(mm)"></el-table-column>
        <el-table-column align="center" prop="avgAltitude" label="平均海拔(m)"></el-table-column>
        <el-table-column align="center" prop="maxAltitude" label="最高海拔(m)"></el-table-column>
        <el-table-column align="center" prop="minAltitude" label="最低海拔(m)"></el-table-column>
        <el-table-column align="center" prop="basinArea" label="流域面积(k㎡)"></el-table-column>
        <el-table-column align="center" prop="basinLength" label="流域长度(km)"></el-table-column>
        <el-table-column align="center" prop="gullyDensity" label="沟壑密度(km/k㎡)"></el-table-column>
        <el-table-column align="center" prop="shapeFactor" label="流域形状系数"></el-table-column>
        <el-table-column align="center" prop="roadVerticalRate" label="主沟道纵比降(%)"></el-table-column>
        <el-table-column align="center" prop="slope" label="坡度(°)"></el-table-column>
        <el-table-column align="center" prop="flatSlope" label="平坡(<3)"></el-table-column>
        <el-table-column align="center" prop="gentleSlope" label="缓坡(3~5)"></el-table-column>
        <el-table-column align="center" prop="middlingSlope" label="中等坡(5~8)"></el-table-column>
        <el-table-column align="center" prop="slopingSlope" label="斜坡(8~15)"></el-table-column>

        <el-table-column align="center" prop="remark" label="备注"></el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination background v-model:currentPage="page.currentPage" @current-change="getData" layout="prev,total, pager, next" :total="page.totalSize"> </el-pagination>
      </el-row>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog :title="logTitle" v-model="editVisible" width="500px">
      <el-form ref="form" :model="form" label-width="160px" label-position="top">
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="省份">
              <el-input v-model="form.province" placeholder="省份"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="县(区)">
              <el-input v-model="form.county" placeholder="县(区)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="乡镇">
              <el-input v-model="form.township" placeholder="乡镇"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="村">
              <el-input v-model="form.village" placeholder="村"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="东经">
              <el-input v-model="form.longitude" placeholder="东经"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="北纬">
              <el-input v-model="form.latitude" placeholder="北纬"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="年平均温度(℃)">
              <el-input v-model="form.avgTemp" placeholder="年平均温度(℃)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="年最高温度(℃)">
              <el-input v-model="form.maxTemp" placeholder="年最高温度(℃)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="年最低温度(℃)">
              <el-input v-model="form.minTemp" placeholder="年最低温度(℃)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="≥10℃积温">
              <el-input v-model="form.accumulateTemp" placeholder="≥10℃积温"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="无霜期(d)">
              <el-input v-model="form.frostlessPeriod" placeholder="无霜期(d)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="年均降雨量(mm)">
              <el-input v-model="form.yearDrp" placeholder="年均降雨量(mm)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="年蒸发量(mm)">
              <el-input v-model="form.yearEt" placeholder="年蒸发量(mm)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="平均海拔(m)">
              <el-input v-model="form.avgAltitude" placeholder="平均海拔(m)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="最高海拔(m)">
              <el-input v-model="form.maxAltitude" placeholder="最高海拔(m)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="最低海拔(m)">
              <el-input v-model="form.minAltitude" placeholder="最低海拔(m)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="流域面积(k㎡)">
              <el-input v-model="form.basinArea" placeholder="流域面积(k㎡)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="流域长度(km)">
              <el-input v-model="form.basinLength" placeholder="流域长度(km)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="沟壑密度(km/k㎡)">
              <el-input v-model="form.gullyDensity" placeholder="沟壑密度(km/k㎡)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="流域形状系数">
              <el-input v-model="form.shapeFactor" placeholder="流域形状系数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="主沟道纵比降(%)">
              <el-input v-model="form.roadVerticalRate" placeholder="主沟道纵比降(%)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="坡度(°)">
              <el-input v-model="form.slope" placeholder="坡度(°)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="平坡(<3)">
              <el-input v-model="form.flatSlope" placeholder="平坡(<3)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="缓坡(3~5)">
              <el-input v-model="form.gentleSlope" placeholder="缓坡(3~5)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="中等坡(5~8)">
              <el-input v-model="form.middlingSlope" placeholder="中等坡(5~8)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="斜坡(8~15)">
              <el-input v-model="form.slopingSlope" placeholder="斜坡(8~15)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="陡坡(15~25)">
              <el-input v-model="form.abruptSlope" placeholder="陡坡(15~25)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="急坡(25~35)">
              <el-input v-model="form.steepSlope" placeholder="急坡(25~35)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="急陡坡(>35)">
              <el-input v-model="form.sharpSteepSlope" placeholder="急陡坡(>35)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="主要土壤类型">
              <el-input v-model="form.mainSoilType" placeholder="主要土壤类型"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="平均土层深度(cm)">
              <el-input v-model="form.soilDepth" placeholder="平均土层深度(cm)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="流域平均输沙模数(t/k㎡.a)">
              <el-input v-model="form.transportSandMods" placeholder="流域平均输沙模数(t/k㎡.a)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="土壤侵蚀模数(t/k㎡.a)">
              <el-input v-model="form.soilErosionMods" placeholder="土壤侵蚀模数(t/k㎡.a)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="流域综合治理度(%)">
              <el-input v-model="form.basinControlDegree" placeholder="流域综合治理度(%)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="土地利用结构-耕地(h㎡)">
              <el-input v-model="form.farmland" placeholder="土地利用结构-耕地(h㎡)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="土地利用结构-园地(h㎡)">
              <el-input v-model="form.gardenPlot" placeholder="土地利用结构-园地(h㎡)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="土地利用结构-林地(h㎡)">
              <el-input v-model="form.woodland" placeholder="土地利用结构-林地(h㎡)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="土地利用结构-牧草地(h㎡)">
              <el-input v-model="form.pastureland" placeholder="土地利用结构-牧草地(h㎡)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="土地利用结构-其他农用地(h㎡)">
              <el-input v-model="form.otherFarmland" placeholder="土地利用结构-其他农用地(h㎡)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="土地利用结构-荒地(h㎡)">
              <el-input v-model="form.wasteland" placeholder="土地利用结构-荒地(h㎡)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="土地利用结构-其他(h㎡)">
              <el-input v-model="form.otherLand" placeholder="土地利用结构-其他(h㎡)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="流域内人口数(人)">
              <el-input v-model="form.population" placeholder="流域内人口数(人)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="流域内劳动力人口(人)">
              <el-input v-model="form.laborPopulation" placeholder="流域内劳动力人口(人)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="平均粮食单产(kg/ h㎡)">
              <el-input v-model="form.avgGrainYield" placeholder="平均粮食单产(kg/ h㎡)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="人均粮食(kg/人)">
              <el-input v-model="form.grainPerCapita" placeholder="人均粮食(kg/人)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="农村生产总值(万元)">
              <el-input v-model="form.ruralGdp" placeholder="农村生产总值(万元)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="人均基本农田(h㎡)">
              <el-input v-model="form.farmlandPerCapita" placeholder="人均基本农田(h㎡)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="人均纯收入(元)">
              <el-input v-model="form.netIncome" placeholder="人均纯收入(元)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="填报人">
              <el-input v-model="form.organizer" placeholder="填报人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="核查人">
              <el-input v-model="form.reviewer" placeholder="核查人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="资料来源">
              <el-input v-model="form.dataSource" placeholder="资料来源"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="备注">
              <el-input v-model="form.remark" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { viewPageStationInfo, smallbasinbasicbasinInfoviewpageRecord, smallbasinbasicbasinInfosavesaveRecord, smallbasinbasicbasinInforemovedelRecord } from '../../../api/index';

export default {
  name: 'stationlist',
  data() {
    return {
      headers: {
        Authorization: sessionStorage['token']
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      query: {
        tm: [],
        stname: ''
      },
      excelllog: false,
      formInline: {},
      tableData: [],
      selectData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      logTitle: '',
      pageTotal: 0,
      form: {},
      daoruUrl: '',
      stationData: []
    };
  },
  created() {
    let that = this;
    that.getData();
    this.getstationData();
    this.daoruUrl = globalVar.jingliujiangyuUrl + '/small/basin/basic/basinInfo/import/importBasinInfo?stcd=' + stationInfo.stcd + '&stType=' + systype;
  },
  methods: {
    successup() {
      this.$message.success('操作成功');
      this.getData();
    },
    download() {
      let that = this;
      window.location.href = globalVar.jingliujiangyuUrl + '/small/basin/basic/basinInfo/download/downloadTemp';

      this.$message.success('下载成功');
    },

    getstationData() {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      viewPageStationInfo(data).then((res) => {
        this.stationData = res.object.dataList.filter((item) => {
          return item.stType == systype;
        });
      });
    },
    getData() {
      let data = {
        currentPage: this.page.currentPage,
        pageSize: 100000,
        stnm: this.query.stnm,
        county: this.query.county,
        stcd: stationInfo.stcd
      };
      smallbasinbasicbasinInfoviewpageRecord(data).then((res) => {
        this.tableData = res.object.dataList;
        this.page = res.object.page;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },
    // 删除操作
    handleDelete(item) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          smallbasinbasicbasinInforemovedelRecord({
            recordNo: item.recordNo
          }).then((e) => {
            this.$message.success('删除成功');
            this.getData();
          });
        })
        .catch(() => {});
    },

    // 编辑操作
    handleEdit(row) {
      this.form = row;

      this.logTitle = '编辑小流域基础信息';

      this.editVisible = true;
    },
    handleAdd() {
      this.logTitle = '新增小流域基础信息';
      this.form = {
        stcd: stationInfo.stcd
      };
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      let that = this;

      that.form.stcd = 1;
      smallbasinbasicbasinInfosavesaveRecord(that.form).then((e) => {
        this.editVisible = false;
        this.$message.success('操作成功');
        this.getData();
      });
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>


